import React from 'react';
import Slider from 'react-slick';
import {WeaErrorPage, WeaLocaleProvider, WeaTools} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
//视频元素
class VideoCom extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			width: 0
		}
	}

	componentDidMount(){
        const { eid } = this.props;
        let width = $(`#content_view_id_${eid}`).width();
        this.setState({width: parseInt(parseInt(width) * parseInt("87%")/100)});
        const fullScreen = this.props.data.fullScreen
        if(fullScreen == 'on'){

        }else{
        	if($(`#video_play_style_${eid}`).length == 0){
                $(`<style id='video_play_style_${eid}'>#video_play_${eid} video::-webkit-media-controls-fullscreen-button{ display: none; } </style>`).appendTo('head')
            }

        }
	}

	shouldComponentUpdate(nextProps,nextState){
        const { eid } = this.props;
        const nextfullScreen = nextProps.data.fullScreen
        const fullScreen = this.props.data.fullScreen
		if(fullScreen != nextfullScreen){
            if(nextfullScreen == 'on'){
                $('#video_play_style_'+eid).remove()
            }else{
                $(`<style id='video_play_style_${eid}'>#video_play_${eid} video::-webkit-media-controls-fullscreen-button{ display: none; } </style>`).appendTo('head')
            }
		}
		return true
	}

	render() {
		const { eid, data, datas } = this.props;
		const { width } = this.state;
		const { height, quality, fullScreen, url, autoPlay, isie, eVideoShowType,
			showMulitline, showNums, showTitle, fontSize } = data;
		const isAutoPlay = autoPlay === 'on';
		const isFullScreen = fullScreen === 'on';
        // document.getElementById("myVideo").play()
		let EVideoCom=<div/>;
		if(eVideoShowType == '1') { //单个视频显示
            EVideoCom = (
                <div style={{position: 'relative', margin: '0 auto', marginLeft: '10px', marginRight: '10px'}}>
                    <VideoItem ecId={`${this && this.props && this.props.ecId || ''}_VideoItem@c18qy8`} props={this.props} data={data} datas={datas[0]} videoRef={this.videoRef} vidRef={this.vidRef}/>
                    {
                        showTitle == '1' && <div style={{height: '15%', fontSize: '16px', color: 'black', textAlign: 'center',
                            width: '100%', fontSize: fontSize + 'px'
                        }} ><div style={{margin: '0 auto', overflow: 'hidden', textOverflow: 'ellipsis',
                            wordBreak: 'normal', whiteSpace: 'nowrap'}}>{datas[0].title}</div></div>
                    }
                </div>
            );
		}else {  //多个视频显示
            const settings = {
                className: "center",
                dots: false,
                infinite: true,
                slidesToShow: parseInt(showNums),
                slidesToScroll: 1,
                autoplay: false,
                nextArrow: <SampleNextArrow ecId={`${this && this.props && this.props.ecId || ''}_SampleNextArrow@2kobnr`} eid={eid}/>,
                prevArrow: <SamplePrevArrow ecId={`${this && this.props && this.props.ecId || ''}_SamplePrevArrow@3ptaj3`} eid={eid}/>,
            };
            let sliderComs = <div/>
			if(showMulitline) {  // 多行
				EVideoCom= (
                	<div>
						{
                            datas.map((item, index) => {
                                return (
                                    <div title={item.title} style={{float: 'left', width: parseInt((width - showNums * 20)/showNums)+ 'px', display: 'inline-block'}}>
                                        <div style={{position: 'relative', margin: '0 auto', marginLeft: '10px', marginRight: '10px'}}>
                                            <VideoItem ecId={`${this && this.props && this.props.ecId || ''}_VideoItem@ufkmgq@${index}`} props={this.props} data={data} datas={item}/>
                                            {
                                                showTitle == '1' && <div style={{height: '15%', fontSize: '16px', color: 'black', textAlign: 'center',
                                                    width: '100%', fontSize: fontSize + 'px'
                                                }} ><div style={{margin: '0 auto', overflow: 'hidden', textOverflow: 'ellipsis',
                                                    wordBreak: 'normal', whiteSpace: 'nowrap'}}>{item.title}</div></div>
                                            }
                                        </div>
                                    </div>
                                )
                            })
						}
					</div>
				);
			}else { //单行
                sliderComs = datas.map((item, index) => {
                    return (
                        <div title={item.title} >
                            <div style={{position: 'relative', margin: '0 auto', marginLeft: '10px', marginRight: '10px'}}>
                                <VideoItem ecId={`${this && this.props && this.props.ecId || ''}_VideoItem@5mhmu9@${index}`} props={this.props} data={data} datas={item}/>
                                {
                                    showTitle == '1' && <div style={{height: '15%', fontSize: '16px', color: 'black', textAlign: 'center',
										width: '100%', fontSize: fontSize + 'px'
                                    }} ><div style={{margin: '0 auto', overflow: 'hidden', textOverflow: 'ellipsis',
                                        wordBreak: 'normal', whiteSpace: 'nowrap'}}>{item.title}</div></div>
                                }
                            </div>
                        </div>
                    )
                })
                EVideoCom = (
                    <Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@pfj2fk`} {...settings}>
                        {sliderComs}
                    </Slider>
                );
			}
		}
		let style={width: '87%', margin: '0 auto'};
		if(eVideoShowType == '1') style={width:'100%',height:height};
        return (
            <div id={`video_play_${eid}`} style={style}>
				{EVideoCom}
            </div>
		)
	}

}


class VideoItem extends React.Component {
    //开启自动播放 让video继续播放
    videoRef = (obj) => {
        if(obj!=null){
            obj.play();
        }

    }
    //关闭自动播放 让video暂停
    vidRef = (obj) => {
        if(obj!=null){
            obj.pause();
        }

    }
    render(){
        const { eid, data, datas, videoRef, vidRef} = this.props;
        const { height, quality, fullScreen, url, autoPlay,isMuted,isie, eAutoHeight, eVideoShowType } = data;
        const isAutoPlay = autoPlay === 'on' && eVideoShowType == '1';
        const isFullScreen = fullScreen === 'on';
		return (
            <video
                ref={isAutoPlay ? this.videoRef : this.vidRef}
                src={datas && datas.videoUrl ? datas.videoUrl : url}
                style={{width: '100%'}}
                height={eAutoHeight ? 'auto': height}
                loop="loop"
				muted={isMuted=="on"? 'muted': ''}
                controlsList="nodownload"
                controls="controls"></video>
		)
	}
}

function SampleNextArrow(props) {
    const { className, style, onClick, eid } = props;
    return (
        <div style={{verticalAlign: 'middle', width: '35px'}}>
            <div style={{ ...style, background: 'transparent url(/page/element/Picture/resource/image/next-horizontal_wev9.png) no-repeat 0 0', width: '32px',
                    height: '32px',"position": "absolute",
                    top: "50%",
                    "margin-top":"-16px",
                    right:"0px",
                    "margin-right": "-7%",cursor: "pointer",}}
                onClick={onClick}
            />
            {/*<div id={`picturenext_${eid}`} className="picturenext" style={{cursor:'hand'}} ></div>*/}
        </div>
    );
}


function SamplePrevArrow(props) {
    const { className, style, onClick, eid } = props;
    return (
        <div style={{ ...style, background: 'transparent url(/page/element/Picture/resource/image/prev-horizontal_wev9.png) no-repeat 0 0', width: '32px',
                height: '32px',"position": "absolute",
                top: "50%",
                "margin-top":"-16px",
                "margin-left": "-7%",
                cursor: "pointer",
            }}
            onClick={onClick}
        />);
}
class MyErrorHandler extends React.Component {
	render() {
		const hasErrorMsg = this.props.error && this.props.error !== "";
		return (
			<WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@n3ubk7`} msg={hasErrorMsg?this.props.error: getLabel(385218,"对不起，该页面异常，请联系管理员！") } />
		);
	}
}

VideoCom = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(VideoCom);
export default VideoCom;